<!--component html goes here -->
<div bsModal #createClassModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createClassGroupModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg" *ngIf="class">
        <div class="modal-content form">
            <form *ngIf="active" #createClassForm="ngForm" class="horizontal-form" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span>添加课时</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">名称</label>
                                <input class="form-control" type="text" id="title" name="title" [(ngModel)]="class.title" required maxlength="32" minlength="2">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">发布时间</label>
                                <input class="form-control" type="date" [(ngModel)]="class.classTime" name="classTime" required/>

                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">缩略图</label>
                                <webuploader [options]="imgOptions" (onReady)="onImgReady($event)" (onDestroy)="onImgDestroy()">
                                    <div id="uploader-demo" class="wu-example">
                                        <div id="imgFileList" class="uploader-list">
                                            <ng-template [ngIf]="class.thumbnailAttachmentIds.length>0">
                                                <div *ngFor="let fileId of class.thumbnailAttachmentIds" [id]="'images'+fileId" class="file-item thumbnail upload-state-done">
                                                    <img [src]="apiBaseUrl+fileId" style="width:100px;height:100px;" alt="" />
                                                    <div class="info"></div>
                                                </div>
                                            </ng-template>
                                        </div>
                                        <div id="imgFilePicker">选择图片</div>
                                    </div>
                                </webuploader>
                                <span class="help-block">只允许选择一张图片.</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">课程内容</label>
                                <input type="hidden" [(ngModel)]="class.attachmentIds" required name="attachmentIds" />
                                <webuploader [options]="audioOptions" (onReady)="onAudioReady($event)" (onDestroy)="onAudioDestroy()">
                                    <div id="uploader-demo" class="wu-example">
                                        <div id="audioFileList" class="uploader-list">
                                            <ng-template [ngIf]="class.attachmentIds.length>0">
                                                <div *ngFor="let fileId of class.attachmentIds" [id]="'images'+fileId" class="file-item thumbnail upload-state-done">
                                                    <audio [src]="apiBaseUrl+fileId" autoplay="autoplay" controls="controls" alt=""></audio>
                                                    <div class="info"></div>
                                                </div>
                                            </ng-template>
                                        </div>
                                        <div id="audioFilePicker">选择课时内容</div>
                                    </div>
                                </webuploader>
                                <span class="help-block">只允许选择一个文件.</span>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="control-label">描述</label>
                        <textarea class="form-control" name="txtDescription" id="txtDescription" [(ngModel)]="class.description" cols="30" rows="10"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default btn-sm" (click)="close()">取消</button>
                    <button type="submit" class="btn btn-primary blue btn-sm" [disabled]="!createClassForm.form.valid">
                    <i class="fa fa-save"></i>
                    <span>保存</span>
                  </button>
                </div>
            </form>
        </div>
    </div>
</div>